<template>
    <div>
        <div class="head">
            <el-input v-model="params.search" @blur="init" @keyup.enter="init" placeholder="请输入类目名称/电话号码搜索待审核分类"></el-input>
        </div>
        <div class="tabel-head">
            <div>提交者账户信息</div>
            <div>备注信息</div>
            <div>一级分类</div>
            <div>状态</div>
        </div>
        <el-scrollbar max-height="calc(100vh - 340px)">
            <template v-for="item in data">
                <div class="name">
                    提交编码：{{ item.orderNo }} <span>{{ item.createTime }}</span>
                </div>
                <div class="grid">
                    <div>
                        <img :src="item.avatar || defaultAvatar" alt="">
                        <div>
                            账户电话
                            <span>{{ item.mobile }}</span>
                        </div>
                    </div>
                    <div>{{ item.remark }}</div>
                    <div>{{ item.categoryName }}</div>
                    <div>
                        <el-tag type="warning" v-if="item.auditStauts == 1">
                            待审核
                        </el-tag>
                        <el-tag type="primary" v-else-if="item.adoptStatus == 1">
                            已采纳
                        </el-tag>
                        <el-tag type="info" v-else-if="item.adoptStatus == 0">
                            已有类似
                        </el-tag>
                    </div>
                </div>
            </template>
            <div class="pagination">
                <el-pagination v-model:current-page="params.page" v-model:page-size="params.size"
                    :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="total"
                    @size-change="init" @current-change="init" />
            </div>
        </el-scrollbar>
    </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { auditList } from "@/apis/products/classify";
import defaultAvatar from "@/assets/images/default-avatar.png";

const data = ref([{}, {}])
const params = ref({
    page: 1,
    size: 10,
    search: '',
})
const total = ref(0);
const init = async () => {
    const res = await auditList(params.value);
    data.value = res.data.records;
    total.value = res.data.total;
}
onMounted(() => init())
</script>

<style lang="scss" scoped>
$border: 1px solid #E1E6ED;

.grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr 1fr;
    border: 1px solid $border;

    >div {
        border-bottom: $border;
        border-left: $border;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px;
    }

    >div:last-child {
        border-right: $border;
    }

    >div:nth-child(2) {
        color: #86909C;
        font-size: 12px;
        line-height: 22px;
    }

    >div:nth-child(3) {
        color: #3D3D3D;
        font-size: 14px;
    }

    >div:first-child {
        justify-content: left;
        gap: 10px;
        padding-left: 20px;

        img {
            width: 50px;
            height: 50px;

        }

        div {
            display: grid;
            grid-template-columns: 1fr;
            line-height: 22px;

            span {
                font-weight: bold;
                color: black;
            }
        }
    }
}

.tabel-head {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr 1fr;
    height: 50px;
    background: #F2F6FC;
    text-align: center;
    line-height: 50px;
    margin-top: 20px;

}

.name {
    background: #F2F6FC;
    height: 40px;
    margin-top: 10px;
    line-height: 40px;
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    color: #86909C;
    font-size: 12px;
    border: $border;
}

.el-icon {
    font-size: 24px;
}
.pagination {
    display: flex;
    justify-content: end;
    margin-top: 10px;
}
</style>